<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>个人信息</span>
        <el-button style="float: right; padding: 5px 5px" type="primary">操作按钮</el-button>
      </div>
      <div class="text item">
        ID: {{ id }}
      </div>
      <div class="text item">
        身份: {{ rolename }}
      </div>
      <div class="text item">
        姓名: {{ name }}
      </div>
      <div class="text item">
        性别: {{ sex === 1 ? '男' : '女' }}
      </div>
      <div class="text item">
        所属公司: {{ enter_name }}
      </div>
      <div class="text item">
        公司类型: {{ enter_type }}
      </div>
      <div class="text item">
        登记日期: {{ hire_date }}
      </div>
    </el-card>
    <el-card style="margin-top:15px;">
      <div class="text item">
        <span>企业邀请码：</span>
        <el-input v-model="invitecode" placeholder="企业邀请码" style="margin-top:5px;" />
        <el-button type="primary" style="margin-top:5px;" @click="chengeInviteCode">更换</el-button>
      </div>
    </el-card>
    <el-card style="margin-top:15px;">
      <div class="text item">
        <span>重置密码：</span>
        <el-button type="primary" style="margin-top:5px;" @click="pwdReset">点我跳转密码重置页</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Profile',
  data() {
    return {
      invitecode: 'FFFFF',
      rolename: '',
      enter_type: ''
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'name',
      'roles',
      'sex',
      'enter_name',
      'hire_date'
    ])
  },
  created() {
    this.getRoleName()
    this.getEnterType()
  },
  methods: {
    getRoleName() {
      this.rolename = (String)(this.$store.getters.roles).substring(2) === '1' ? '管理员' : '普通用户'
    },
    getEnterType() {
      switch (this.$store.getters.enter_type) {
        case 1:
          this.enter_type = '屠宰企业'
          break
        case 2:
          this.enter_type = '批发市场'
          break
        case 3:
          this.enter_type = '农贸市场'
          break
      }
    },
    pwdReset() {
      this.$router.push('/forgetpwd')
    },
    chengeInviteCode() {
      this.$message.success('更换邀请码提醒')
    }
  }
}
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
</style>

